// 为了便于后期维护，通过会把router专门写在一个文件中
// 1、引入路由对象
import VueRouter from "vue-router";
import Vue from "vue";

// 2、注册全局组件   router-link(声明式导航) router-view（挂载）
Vue.use(VueRouter)

// 3、创建路由规则
const routes1 = [
    { // 配置默认路由，自定跳转到首页
        path: "/",
        redirect: "/index" // 重定向
    },
    {
        path: "/login",
        // 按需引入组件
        component: ()=>import("../views/login.vue")
    },
    {
        path: "/register",
        // @表示src目录的别名
        component: ()=>import("@/views/register.vue")
    },
    {
        path: "/personal",
        component: ()=>import("@/views/personal.vue")
    },
    {
        path: "/edit_profile",
        component: ()=>import("@/views/edit_profile.vue")
    },
    {
        path: "/index",
        component: ()=>import("@/views/index.vue"),
        meta: { // 元信息，可以保存任何你想保存的数据
            curIndex: localStorage.getItem("token-70")?1:0
        }
    },
    {
        path: "/articleDetail",
        component: ()=>import("@/views/articleDetail.vue")
    },
    {
        path: "/commentList",
        component: ()=>import("@/views/commentList.vue")
    },
    {
        path: "/category",
        component: ()=>import("@/views/category.vue")
    },
    {
        path: "/search",
        component: ()=>import("@/views/search.vue")
    }
]

// 4、通过路由规则生成路由对象
const router = new VueRouter({
    // routes: routes
    routes: routes1
})

// 解决反复跳转到同一个路由地址报错问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}

let arr = [ "/personal", "/edit_profile"]; // 设置白名单，所有存在在白名单中的路径都表示需要登录后才能访问的页面
// 导航守卫
// 因为某些页面是必须登录后才能访问的，因此我们可以通过导航守卫进行路由拦截
router.beforeEach((to,from,next)=>{
    // to: 跳转的目标路由对象
    // from: 跳转之前的路由对象（当前的路由对象）
    // next： 必须要调用的一个函数
    let token = localStorage.getItem("token-70");
    if( arr.indexOf(to.path)!=-1 && !token ){
        next("/login") // 跳转到登录页面
    }else{
        next()          // 直接进入到你跳转的目标页面
    }
})

// 5、导出路由对象
export default router